<template>
    <div class="home">
        <div class="notice">
            <van-notice-bar left-icon="volume-o" :scrollable="false">
                <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                    <van-swipe-item v-for="item in notices" :key="item.id">
                        <span class="split">{{item.content}}</span>
                    </van-swipe-item>
                </van-swipe>
            </van-notice-bar>
        </div>
        <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="menu">
            <van-grid clickable :column-num="4">
                <van-grid-item icon="service-o" text="服务反馈" to="/home/service" />
                <van-grid-item icon="brush-o" text="我要报修" to="/home/repair" />
                <van-grid-item icon="wap-home-o" text="看看房子" to="/home/house" />
                <van-grid-item icon="logistics" text="看看车位" to="/home/stall" />
            </van-grid>
        </div>
        <feedback :feedback="notices" title="信息通报" to="/home/notice/list"></feedback>
        <feedback :feedback="services" title="服务反馈" to="/home/service/list"></feedback>
        <Tabbar />
    </div>
</template>

<script>
import api from "../api";
import Tabbar from "../component/tabbar";
import feedback from "../component/feedback.vue";
export default {
    components: {
        Tabbar,
        feedback,
    },
    data() {
        return {
            images: [
                require("../assets/img1.jpg"),
                require("../assets/img2.jpg"),
                require("../assets/img3.jpg"),
            ],
            notices: [],
            services: [],
        };
    },
    mounted() {
        this.getNotice();
        this.getService();
    },
    methods: {
        // 获取通报
        async getNotice() {
            const response = await api.notice.getFeedbackPage({
                type: 1,
                currentPage: 1,
                pageSize: 3,
            });
            this.notices = response.data.data.records || [];
        },
        // 获取服务反馈
        async getService() {
            const response = await api.notice.getFeedbackPage({
                type: 0,
                currentPage: 1,
                pageSize: 3,
            });
            this.services = response.data.data.records || [];
        },
    },
};
</script>

<style lang='less' scoped>
.notice-swipe {
    height: 40px;
    line-height: 40px;
}
.my-swipe {
    img {
        width: 100%;
        height: 14rem;
        object-fit: cover;
    }
}
.home {
    background: #f5f5f5;
}
.split {
    width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}
</style>